<!-- src/views/settings/Settings.vue -->
<template>
  <div class="settings-view">
    <el-row :gutter="20">
      <!-- 左侧菜单 -->
      <el-col :span="6">
        <Card>
          <el-menu
            :default-active="activeMenu"
            class="settings-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item
              v-for="tab in settingsConfig"
              :key="tab.id"
              :index="tab.id"
            >
              <el-icon><component :is="tab.icon" /></el-icon>
              <span>{{ tab.title }}</span>
            </el-menu-item>
          </el-menu>
        </Card>
      </el-col>

      <!-- 右侧内容区 -->
      <el-col :span="18">
        <Card :title="currentMenuTitle">
          <!-- 动态表单渲染 -->
          <el-form
            v-if="currentTab?.renderType === 'form'"
            :model="currentFormData"
            label-width="120px"
            class="settings-form"
          >
            <template v-for="field in currentTab.fields" :key="field.name">
              <el-form-item :label="field.label">
                <!-- 输入框 -->
                <el-input
                  v-if="field.type === 'input'"
                  v-model="currentFormData[field.modelKey]"
                  v-bind="field.props"
                />

                <!-- 选择器 -->
                <el-select
                  v-else-if="field.type === 'select'"
                  v-model="currentFormData[field.modelKey]"
                  v-bind="field.props"
                >
                  <el-option
                    v-for="option in field.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>

                <!-- 开关 -->
                <el-switch
                  v-else-if="field.type === 'switch'"
                  v-model="currentFormData[field.modelKey]"
                  v-bind="field.props"
                />

                <!-- 数字输入 -->
                <el-input-number
                  v-else-if="field.type === 'number'"
                  v-model.number="currentFormData[field.modelKey]"
                  v-bind="field.props"
                />

                <!-- 自定义：主题切换 -->
                <el-radio-group
                  v-else-if="field.type === 'custom' && field.name === 'theme'"
                  v-model="currentFormData[field.modelKey]"
                >
                  <el-radio label="light">浅色</el-radio>
                  <el-radio label="dark">深色</el-radio>
                </el-radio-group>

                <!-- 默认回退 -->
                <span v-else>未支持的字段类型: {{ field.type }}</span>
              </el-form-item>
            </template>

            <el-form-item>
              <el-button type="primary" @click="saveCurrentSettings">
                保存{{ currentMenuTitle }}
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 如果未来扩展 table/custom，可在这里加 v-else-if -->
          <div v-else>
            <el-alert type="info" :title="`${currentMenuTitle} 暂无配置项`" />
          </div>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { settingsConfig } from '@/config/settingsConfig'
import Card from '@/components/common/Card.vue'

// 当前激活的菜单项
const activeMenu = ref('basic')

// 当前选中的 Tab 配置
const currentTab = computed(() => {
  return settingsConfig.find(tab => tab.id === activeMenu.value)
})

// 当前菜单标题
const currentMenuTitle = computed(() => {
  return currentTab.value?.title || '设置'
})

// 表单数据模型（简化版，直接在组件内维护）
const formData = ref({
  basicSettings: {
    systemName: 'HomeCube 智能家居',
    timezone: 'UTC+8',
    language: 'zh-CN',
    theme: 'light'
  },
  notificationSettings: {
    email: true,
    sms: true,
    push: true,
    alerts: true,
    dailyReport: false,
    weeklyReport: true
  },
  securitySettings: {
    passwordStrength: 'medium',
    loginLock: true,
    maxFailedAttempts: 5,
    twoFactorAuth: false,
    sessionTimeout: 30
  }
})

// 类型定义：支持任意字符串 key 索引
interface SettingsData {
  [key: string]: any
}

// 当前表单数据
const currentFormData = computed<SettingsData>(() => {
  if (!currentTab.value?.dataKey) return {}
  return formData.value[currentTab.value.dataKey as keyof typeof formData.value] || {}
})
// 菜单切换
const handleMenuSelect = (index: string) => {
  activeMenu.value = index
}

// 保存当前设置
const saveCurrentSettings = () => {
  if (!currentTab.value?.dataKey) return
  ElMessage.success(`${currentMenuTitle.value}已保存`)
  console.log('保存的数据:', currentFormData.value)
}
</script>

<style scoped>
.settings-view {
  padding: 20px;
}

.settings-menu {
  border: none;
}

.settings-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

.settings-form {
  padding: 20px 0;
}

/* 表单项目间距 */
:deep(.el-form-item) {
  margin-bottom: 16px;
}
</style>